<template>
  <div class="app-container">
    <section>
      <div class="contentBox">
        <div class="title">
          <span>{{ $route.query.title }}</span>
        </div>
        <div class="content">
          <div class="cateTitle">
            <span>薪资单类别：</span>
            <el-input
              style="width: 250px"
              placeholder="请输入"
              v-model="form.title"
            ></el-input>
          </div>
          <el-checkbox
            v-model="isAllChecked"
            class="check"
            size="medium"
            @change="changeCheck"
            >全选</el-checkbox
          >
          <div class="wrapBox">
            <div class="left">
              <p>应发项</p>
              <el-checkbox-group
                v-model="checkList"
                @change="change($event, 1)"
              >
                <el-checkbox
                  v-for="(ele, index) in list1"
                  :label="ele.id"
                  :key="index"
                  >{{ ele.title }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
            <div class="right">
              <p>扣减项</p>
              <el-checkbox-group
                v-model="checkList2"
                @change="change($event, 2)"
              >
                <el-checkbox
                  v-for="(ele, index) in list2"
                  :label="ele.id"
                  :key="index"
                  >{{ ele.title }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
          </div>
          <div style="margin-top: 40px">
            <el-button style="width: 100px" @click="$router.go(-1)"
              >返回</el-button
            >
            <el-button type="primary" style="width: 100px" @click="save()"
              >确定</el-button
            >
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: "",
      isAllChecked: false,
      checkList: [],
      checkList2: [],
      list1: [
        {
          id: "1",
          title: "基本工资",
          check: false,
        },
        {
          id: "2",
          title: "固定加班费",
          check: false,
        },
        {
          id: "3",
          title: "绩效工资",
          check: false,
        },
        {
          id: "4",
          title: "全勤奖",
          check: false,
        },
        {
          id: "5",
          title: "敬业奖",
          check: false,
        },
        {
          id: "14",
          title: "补贴",
          check: false,
        },
        {
          id: "6",
          title: "其他收入",
          check: false,
        },
        {
          id: "7",
          title: "提成",
          check: false,
        },
      ],
      list2: [
        {
          id: "8",
          title: "个人社保扣款",
          check: false,
        },
        {
          id: "9",
          title: "个人公积金扣款",
          check: false,
        },
        {
          id: "10",
          title: "个人所得税扣款",
          check: false,
        },
        {
          id: "11",
          title: "考勤扣款",
          check: false,
        },
        {
          id: "12",
          title: " 其他扣款",
          check: false,
        },
        {
          id: "13",
          title: "预支工资",
          check: false,
        },
      ],
      form: {
        title: "",
        cate: "",
        id: "",
      },
    };
  },
  created() {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id;
      this.getSalaryCate();
    }
    this.$route.meta.title = this.$route.query.title;
  },
  methods: {
    changeCheck(e) {
      let list = [];
      let list2 = [];
      if (e) {
        this.list1.forEach((ele) => {
          list.push(ele.id);
        });
        this.list2.forEach((ele) => {
          list2.push(ele.id);
        });
        this.checkList = list;
        this.checkList2 = list2;
      } else {
        this.checkList = [];
        this.checkList2 = [];
      }
    },
    change(ele, type) {
      let arr = [...this.checkList, ...this.checkList2];
      if (arr.length == 14) {
        this.isAllChecked = true;
      } else {
        this.isAllChecked = false;
      }
      console.log(arr, "888888888888888");
    },
    // 获取详情
    async getSalaryCate() {
      let { code, data } = await this.$Http.getSalaryCate({ id: this.form.id });
      if (code) {
        let cate = data.cate.split(",");
        let list1 = [];
        let list2 = [];
        cate.forEach((ele) => {
          if (ele * 1 <= 7 || ele*1 == 14) {
            list1.push(ele);
          } else {
            list2.push(ele);
          }
        });
        this.checkList = list1;
        this.checkList2 = list2;
        let arr = [...this.checkList, ...this.checkList2];
        if (arr.length == 14) {
          this.isAllChecked = true;
        } else {
          this.isAllChecked = false;
        }
        this.form.title = data.title;
      }
    },
    async save() {
      if (!this.form.title) {
        this.$message.error("请输入分类名称");
        return;
      }
      if (!this.checkList.length && !this.checkList2.length) {
        this.$message.error("请选择应发项或扣减项");
        return;
      }
      let ids = [...this.checkList, ...this.checkList2];
      this.form.cate = ids.join(",");
      let { code } = await this.$Http.setSalaryCate(this.form);
      if (code) {
        if (this.form.id) {
          this.$message.success("编辑成功");
        } else {
          this.$message.success("新增成功");
        }
        this.$router.go(-1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  section {
    .contentBox {
      background: #fff;
      border-radius: 8px;
      padding: 0px 24px 20px;
      min-width: 900px;
      min-height: calc(100vh - 165px);
      .title {
        line-height: 70px;
        font-size: 18px;
        font-weight: 600;
        color: #383b40;
        .el-icon-close {
          cursor: pointer;
        }
      }
    }
    .content {
      max-width: 800px;
      height: 100%;
      .cateTitle {
        display: flex;
        align-items: center;
        span {
          display: block;
          width: 120px;
        }
      }
      .wrapBox {
        display: flex;
        .left,
        .right {
          min-width: 400px;
          p {
            color: #333;
            font-size: 18px;
            margin-bottom: 20px;
          }
        }
      }
      .form {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
    }
  }
}
::v-deep {
  .el-checkbox {
    width: 100%;
    font-size: 18px;
    margin-bottom: 10px;
  }
}
.check {
  margin-top: 20px;
}
</style>